<!--
 @description 新增/编辑区域
 @fileName Add.vue
 @author zengqiongying
 @created 2023/06/14 13:34:56
-->
<template>
  <Popup
    v-model="showPop"
    :title="`${detail.amid ? '编辑' : '新增'}验收区域`"
    :showTitle="true"
    buttonType="text"
    @confirm="onConfirm"
    @cancel="onCancel"
  >
    <div class="pad16">
      <div class="field-cell">
        <div class="title">楼层选择</div>
        <FieldPicker
          title="验收楼层"
          hideTitle
          v-model="formData.module1"
          valueName="name"
          labelName="name"
          :optionData="floorList"
          placeholder="请选择"
          inputAlign="left"
          cellClassName="item-field"
        />
      </div>
      <div class="field-cell">
        <div class="title">图纸面积</div>
        <qmp-field v-model="formData.module2" maxlength="10" placeholder="输入内容" class="ctm-text-field" />
      </div>
    </div>
  </Popup>
</template>

<script lang="ts">
  import Popup from '@/components/Popup/index.vue'
  import FieldPicker from '@/components/FieldPicker/index.vue'
  import { reactive, toRefs, getCurrentInstance, watch, computed, nextTick, defineComponent } from 'vue'
  import { useRouter } from 'vue-router'
  import { IAnyKeyObject } from '@/types/common'
  import { saveModule } from '@/apis/Module'

  export default defineComponent({
    name: 'AddModule',
    components: { Popup, FieldPicker },
    props: {
      detail: {
        type: Object,
        default: () => {}
      },
      caid: {
        type: String,
        default: ''
      },
      show: {
        type: Boolean,
        default: false
      }
    },
    emits: ['update:show', 'success'],
    setup(props, { emit }) {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $router = useRouter()

      const datas = reactive<IAnyKeyObject>({
        showPop: true,
        formData: {
          amid: '',
          module1: '',
          module2: ''
        },
        floorList: []
      })
      const showPop = computed({
        set(val) {
          emit('update:show', val)
        },
        get() {
          return props.show
        }
      })
      watch(
        () => props.detail,
        (val) => {
          refreshFormData(val)
        },
        {
          deep: true
        }
      )
      watch(
        () => showPop.value,
        (val) => {
          if (val) {
            refreshFormData(props.detail)
          }
        }
      )
      const refreshFormData = (d: any) => {
        if (d && d.amid) {
          for (let key in datas.formData) {
            datas.formData[key] = d[key] || ''
          }
        } else {
          datas.formData.module1 = '1楼'
        }
      }
      const onConfirm = () => {
        const data = {
          ...datas.formData,
          ...{
            acceptID: props.caid
          }
        }
        if (!data.module1) {
          proxy.$toast('请选择楼层')
          return
        }
        if (!data.module2) {
          proxy.$toast('请输入区域')
          return
        }

        saveModule(data).then((res: any) => {
          proxy.$toast('操作成功')
          nextTick(() => {
            showPop.value = false
            emit('success')
          })
        })
      }
      const onCancel = () => {
        const data = { ...datas.formData }
        for (let key in data) {
          data[key] = ''
        }
        datas.formData = data
      }
      const getFloorData = () => {
        const list = []
        for (let i = 10; i >= -10; i--) {
          if (i === 0) continue
          list.push({ name: `${i < 0 ? '负' + Math.abs(i) : i}楼` })
        }
        datas.floorList = list
      }
      getFloorData()

      return {
        ...toRefs(datas),
        showPop,
        onConfirm,
        onCancel
      }
    }
  })
</script>
<style lang="less" scoped>
  .pad16 {
    padding: 0 16px 24px;
  }
  .field-cell {
    margin-bottom: 16px;
    .title {
      font: var(--font-main-body);
      color: var(--texticon-default-stronger);
      margin-bottom: 16px;
    }
    /deep/ .item-field {
      background: var(--input-bg-disable);
      border: 1px solid var(--input-line-active);
      border-radius: var(--radius-xl);
    }
  }
</style>
